<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/serch.css">
    <link rel="stylesheet" href="./fonts/iconfont.css">
</head>

<body>
    <header>
        <div class="logo"><a href="#" class="iconfont icon-wangyiyunyinle1">网易云音乐</a></div>
        <div class="download"><a href="#">下载APP</a></div>
    </header>
    <nav>
        <ul>
            <li><a href="index.html" class="active">推荐音乐</a></li>
            <li><a href="hot-music.html">热搜榜</a></li>
            <li><a href="search.html">搜索</a></li>
        </ul>
    </nav>
    <section>
        <div class="search">
            <div class="search-box">
                <span class="iconfont icon-sousuo"></span>
                <input type="text" placeholder="搜索歌曲、歌手、专辑">
            </div>
        </div>
        <div class="hot-search">
            <h3>热门搜索</h3>
            <ul>
                <li>他只是经过</li>
                <li>会不会</li>
                <li>永不失联的爱</li>
                <li>不曾遗忘的符号</li>
                <li>薛之谦</li>
                <li>日不落</li>
                <li>Dear john</li>
                <li>为你我受冷风吹</li>
                <li>魏大勋新歌</li>
                <li>起风了</li>
            </ul>
        </div>
        <div class="music"></div>
    </section>




</body>
<script>
    const inp = document.querySelector('input')
    const hotSearch = document.querySelector('.hot-search')
    const section = document.querySelector('section')

    async function search(key){
        // 向后端指定接口地址发送请求(携带数据)
        fetch(`http://iwenwiki.com:3000/search?keywords=${key}`).then(
            res=>{
                // 接收后端响应 res.status == 200 => 后端响应成功
                if(res.status == 200){
                    hotSearch.remove()
                    document.querySelector('.music').remove()
                    return res.json(); // 将数据以JSON数据形式传递
                }
                else{
                    throw new Error('请求错误')
                }
            }
        ).then(data=>{  // data => 接收前一个then放大传递的数据
                console.log("data",data);
                let songs=data.result.songs  // 从数据中找到歌曲的数组
                const music=document.createElement('div')
                music.className='music'
                for(let song of songs){
                    const musicItem =document.createElement('div')
                    musicItem.className='music-item'
                    musicItem.innerHTML=`<a href="#" class="item">
                        <div class="music-name">
                            <p>${song.name}</p>
                            <p class="iconfont icon-erji">${song.artists[0].name} - ${song.album.name}</p>
                        </div>
                        <span class="iconfont icon-bofang"></span>
                    </a>
                    `
                    music.append(musicItem)
                }
                section.append(music)
            }
        )
        .catch(err=>{
            console.log('请求错误',err);
        })
    }

    inp.onchange=function(){
        search(inp.value)
    }









    // async function search(key) {
    //     fetch(`http://iwenwiki.com:3000/search?keywords=${key}`)
    //         .then(res => {
    //             // 这里可以加入校验请求是否成功
    //             if (res.status == 200) {
    //                 hotSearch.remove()
    //                 return res.json()
    //             } else {
    //                 throw new Error('请求出错')
    //             }
    //         }).then(data => {
    //             //处理返回的结果 歌曲名 艺术家 专辑
    //             let songs = data.result.songs
    //             const music = document.createElement('div')
    //             music.className = "music"
    //             document.querySelector('.music').remove()
    //             console.log(songs);
    //             for (let song of songs) {
        //                 const musicItem = document.createElement('div')
        //                 musicItem.className = 'music-item'
        //                 musicItem.innerHTML = `
        //                 <a href="#" class="item">
    //                     <div class="music-name">
    //                         <p>${song.name}</p>
    //                         <p class="iconfont icon-erji">${song.artists[0].name} - ${song.album.name}</p>
    //                     </div>
    //                     <span class="iconfont icon-bofang"></span>
    //                 </a>
    //                 `
    //                 music.append(musicItem)
    //             }
    //             section.append(music)
    //         }).catch(err => {
        //             console.log('请求出错', err);
        //         })
        // }
        // inp.onchange = function () {
    //     search(inp.value)
    // }


</script>

</html>